<script>
export default {
  name: 'CList',
  props: {
    column: {
      type: Number,
      default: 1
    },
    labelWidth: {
      type: String,
      default: 'auto'
    },
    sep: {
      type: String,
      default: ':'
    }
  },
  methods: {
    validate(...args) {
      return this.$refs.form.validate(...args)
    },
    validateField(...args) {
      return this.$refs.form.validateField(...args)
    },
    resetFields(...args) {
      return this.$refs.form.resetFields(...args)
    },
    clearValidate(...args) {
      return this.$refs.form.clearValidate(...args)
    },
    validateEvent(...args) {
      return this.$emit('validate', ...args)
    }
  },
  render(h) {
    const vnode = this.$scopedSlots.default()
    const colWidth = 24 / this.column
    const newVnode = []
    for (const node of vnode) {
      if (node.tag === undefined) continue
      node.componentOptions ? '' : node.componentOptions = {}
      const propsData = node.componentOptions.propsData || {}
      node.componentOptions.propsData = propsData
      if (!propsData.labelWidth) {
        propsData.labelWidth = this.labelWidth
      }
      if (!propsData.sep) {
        propsData.sep = this.sep
      }
      node.data ? '' : node.data = {}
      // node.data.staticStyle ? '' : node.data.staticStyle = {}
      let span = propsData.span
      if (span === undefined) {
        span = 1
      }
      // node.data.staticStyle.flex = `0 0 ${colWidth * span}%`
      newVnode.push(
        h('el-col', { props: { span: Math.floor(colWidth * span) }}, [node])
      )
    }
    // return h('div', { class: 'c-list' }, vnode)
    return h('el-form', { props: {
      labelWidth: this.labelWidth,
      size: 'mini',
      ...this.$attrs
    },
    on: {
      validate: this.validateEvent
    },
    ref: 'form' }, [h('el-row', {}, newVnode)])
  }
}
</script>
<style lang="scss" scoped>
.c-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
</style>
